<template>
<div class="adoptHarvest">
  <y-table
    border
    :getDataWay="{
      data: tableData
    }"
    :columns="columns"
  >
    <template slot="button">
      <el-button type="primary" @click="() => addHarvest()">添加成品</el-button>
    </template>
    <el-table-column slot="enableFlag" label="是否启用" align="center" header-align="center">
      <template v-slot="{row}">
        <el-popconfirm
          :title="row.enableFlag === '1' ? `是否确认禁用【${row.name}】？` : `是否确认启用【${row.name}】？`"
          @confirm="doEnable(row, row.enableFlag === '0')"
        >
          <el-switch
            disabled
            slot="reference"
            v-model="row.enableFlag"
            active-value="1"
            inactive-value="0"></el-switch>
        </el-popconfirm>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="150">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button type="primary" size="mini" @click="editHarvest(row)">编辑</el-button>
          <el-popconfirm
              title="是否确认删除该角色？"
              @confirm="delHarvest(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <y-form
    v-model="forms.formModel"
    :visible.sync="forms.showForm"
    :title="forms.formTypeTitle[forms.formsType]"
    destroy-on-close
    append-to-body
    width="50%"
    :form-attrs="forms.formAttrs"
    :columns="forms.formColumns"
    @ensure="ensureModel">
  </y-form>
</div>
</template>

<script>
export default {
  name: "adoptHarvest",
  props:{
    adoptId: String
  },
  data(){
    return{
      columns: [{
        label: "名称",
        prop: "name"
      },{
        label: "数量",
        prop: "amount"
      },{
        label: "排序",
        prop: "orderNum"
      },{
        label: "是否启用",
        prop: "enableFlag",
        template: true
      }],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加成品',
          'EDIT': '编辑成品'
        },
        formModel:{
          name: '',
          amount: '',
          orderNum: ''
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            name: [{required: true, message: "请输入成品名称", trigger: "blur"}],
            amount: [
              {required: true, message: "请输入成品数量", trigger: "blur"},
              {pattern: /^\d$/, message: "请输入整数", trigger: "blur"}
            ],
          }
        },
        formColumns:[
          {
            label: "成品名称",
            prop: "name",
            comp:{
              compType: 'input',
              attrs:{
                clearable: true
              }
            }
          },
          {
            label: "成品数量",
            prop: "amount",
            comp:{
              compType: 'input',
              attrs:{
                clearable: true
              }
            }
          },
          {
            label: "排序",
            prop: "orderNum",
            comp:{
              compType: 'input-number',
              attrs:{
                clearable: true,
                stepStrictly: true
              }
            }
          }
        ]
      },
      tableData: []
    }
  },
  created() {
    this.queryList();
  },
  methods:{
    queryList(){
      this.$yAxios({
        url: this.$api.adopt.adoptHarvestList,
        data:{
          adoptId: this.adoptId
        },
        loading: true
      }, info => {
        this.tableData = info;
      });
    },
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    addHarvest(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    editHarvest(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    delHarvest(row){
      this.$yAxios({
        url: this.$api.adopt.removeAdoptHarvest,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.queryList();
      })
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = Object.assign({
          adoptId: this.adoptId,
          enableFlag: '1'
        }, form);
      }
      this.$yAxios({
        url: this.$api.adopt.saveAdoptHarvest,
        data: newForm
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.queryList();
      })
    },
    doEnable(row, bool){
      let url = bool ? this.$api.adopt.enableAdoptHarvest : this.$api.adopt.disableAdoptHarvest;
      this.$yAxios({
        url,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: bool ? '启用成功' : '禁用成功'
        });
        this.queryList();
      })
    },
    save(){
      return new Promise(resolve => {
        resolve();
      });
    }
  }
}
</script>

<style scoped>

</style>